<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <App></App>
      <List></List>
    </div>

    <script>
      const App = Vue.extend({
        name: "App",
        template: `<h1>App组件</h1>`,
        mounted() {
          /*
          当组件被使用的时候,会实例化当前的VueComponent构造函数
          组件内部事件函数的this都是指向当前组件的实例化对象 也就是VueComponent构造函数的实例化对象

          //根据下边的打印得到组件实例的原型链
          当前组件实例==>当前组件的VueComponent原型对象==>Vue的原型对象==>Object原型对象==>null
          //可以得到一个结论: VueComponent构造函数 继承 Vue构造函数
          */
          console.log(this); //当前组件的实例化对象
          console.log(this.__proto__); //当前组件的VueComponent的原型对象
          console.log(this.__proto__.__proto__); //Vue的原型对象
          console.log(this.__proto__.__proto__.__proto__); //Object额原型对象
        },
      });
      const List = Vue.extend({
        name: "List",
        template: `<ul>List组件</ul>`,
      });

      console.log(App);
      console.log(List);
      console.log(App === List);
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        components: {
          App,
          List,
        },
        data() {
          return {};
        },
      });
    </script>
  </body>
</html>
